<%@page import="org.proddevplm.dao.data.designForX.DfXGuidelines"%>
<%@page import="org.proddevplm.dao.data.designForX.DfXRelMatrix"%>
<%@page import="org.proddevplm.dao.data.designForX.DesignForX"%>
<%@page import="org.proddevplm.dao.data.activities.Activity"%>
<%@page import="java.util.List"%>
<%@page import="org.proddevplm.constants.ControllerConstants"%>
<%@page import="org.proddevplm.business.tools.constants.ToolsConstants" %>
<%@page import="org.proddevplm.business.activity.constants.ActivityConstants" %>

<script>

	$(function(){
		$("button").button();
		$("#allDFXContent").hide();
		$("#addDFXConcepts").hide();
		$("#supportInfo").hide();
		$("#dfxGDiv").hide();
		
		$('.helpImg').mouseover(function () {
		    $(this).css("cursor", "pointer");
		 });

		$('.helpImg').mouseout(function () {
		    $(this).css("cursor","default");	    
		 });
		
		$("#dfxApproverTable")
			.tablesorter({
				widgets: ['zebra'],
				headers:{
					2:{sorter:false}
				}
			})
			.tablesorterPager({
				container: $("#dfxPager")
				})
			.tablesorterFilter({
				filterContainer: "#dfxFilter-box",
	        	filterClearContainer: "#dfxFilter-clear-button",
	            filterCaseSensitive:false,
	            filterColumns: [0,1]
			})
	})
	
	function showDFXInfo(){
		$("#supportInfo").show();
	}
	
	function hideDFXInfo(){
		$("#supportInfo").hide();
	}
	
	function addDFX(){
		$("#addDFXConcepts").show();
	}
	
	function loadGuidelinesWithReq(request, page){
		$.post(request, function(data) {
	        $("#guidelinesDiv").load(page);
	    });
	}
	
	function loadGTableWithReq(request, page){
		$.post(request, function(data){
			$("#guidelinesTable").load(page);
		})
	}

	function getGuidelines(id){
		loadGuidelinesWithReq("/proddev/controller?manager=dataAccessManager&method=41&dfxId="+id,"content/project/devTools/workspace/dfX/info/guidelinesList.jsp");
	}
	
	function addConcepts(){
		var select = document.getElementById('selDfxConcepts');
		var destSelect = document.getElementById('chosenDfxConcepts');
				
		for(var i=0; i<select.length; i++){
			if(select.options[i].selected){
				var text = select.options[i].text;
				var value = select.options[i].value;
				destSelect.options[destSelect.options.length] = new Option(text, value);
			}
		}
	}
	
	function removeConcept(){
		$("#chosenDfxConcepts option").each(function(){
			if(this.selected){
				$(this).remove();
			}
		});
	}
	
	function selectGuidelines(){
		var index = 0;
		var list = '';
		$("#chosenDfxConcepts option").each(function(){
			if(index++>0){
				list+='~';
			}
			list+=$(this)[0].value;
		});
		
		loadGTableWithReq("/proddev/controller?manager=dataAccessManager&method=43&dfxIds="+list,"content/project/devTools/workspace/dfX/selection/guidelinesTable.jsp")
	}
	
	function removeDFXG(id, rowId){
		var confirmDFXGDeletion = confirm("Do you want to remove this guideline from this product?");
		if(confirmDFXGDeletion){
			var row = "row_"+rowId;
			$("#"+row).hide();
			var arguments = "dfxRMId="+id;
			ajaxCall("toolsManager", "28", arguments, removeMessage);
		}
	}
	
	function removeMessage(data){
		alert('Guideline successfully removed from this product');
	}
	
	function approveActivity(name){
		$("#activityName").val(name);
		document.forms['approveForm'].submit();
	}
	
	function rejectActivity(name){
		$("#activityName").val(name);
		$("#rejectDialog").dialog("open");
	}
	
	$( "#rejectDialog" ).dialog({
		autoOpen: false,
		height: 350,
		width: 350,
		modal: true,
		buttons: {
			"Propose change": function() {
				var name = document.getElementById("activityName").value;
				var arguments = "activityName="+name+"&"+buildParameter("changeSubject")+"&"+buildParameter("changeDetails");
				ajaxCall("toolsManager", "21", arguments, forward);
				$( this ).dialog( "close" );
				},
			Cancel: function() {
				$( this ).dialog( "close" );
			}
		},
		close: function() {
			$( this ).dialog( "close" );
		}
	});
	
	function forward(data){
		document.forms["rejectForm"].submit();
	}

</script>

<%
	List<Activity> activitiesForUser = (List)session.getAttribute("activitiesForUser");
	List<DesignForX> allDFXInDB = (List)session.getAttribute("allDFXInDB");
	List<DfXRelMatrix> dfxRelMatrixByActName = (List)session.getAttribute("dfxRelMatrixByActName");
%>

<div class="pageTitle">
	<div style="text-align:left;">
		<a href="/proddev/controller?manager=dataAccessManager&method=21">
			<img src="/proddev/images/arrowleft.png" align="middle" height="20" width="30" style="border:0px"></a>
	</div>
	<p style="font-size:small; font-weight:bold; margin-top:-20px">Design for X page</p>

</div>

<%if(dfxRelMatrixByActName==null){ %>
	<div style="margin:10 0 0; width:100%">
		<div style="width:30%; float:left; text-align:left; font-weight:bold; color:#555555">
			Please choose the activity you want to complete
		</div>
		<select class="regInput" id="activitySelect" name="activitySelect" onchange="$('#allDFXContent').show()" size="1" style="width:25%; float:left; margin-left:10px">
			<option SELECTED>-select activity-</option>
			<%if(activitiesForUser!=null){
				for(int i=0; i<activitiesForUser.size(); i++) {
					Activity activity = (Activity)activitiesForUser.get(i);%>
					<option value="<%=activity.getName()%>"><%=activity.getName() %></option>
				<%}
			}
			%>		
		</select>
		<div style="clear:both"></div>
	</div>
	
	<div id="allDFXContent" style="width:100%; margin-top:10px;">
	
		<div style="width:auto; margin-top:5px; text-align:left">
			<button id="showDFXInfo" name="showDFXInfo" onclick="showDFXInfo()" style="width:10%; font-size:x-small; font-weight:bold;">Show info</button>
			<button id="hideDFXInfo" name="hideDFXInfo" onclick="hideDFXInfo()" style="width:10%; font-size:x-small; font-weight:bold;">Hide info</button>
		</div>
		<div id="supportInfo" style="width:100%; margin-top:5px;">
			<div class="containerSmall" style="width:48%; height:150px; float:left">
				<div class="pageTitle" style="width:100%; font-weight:bold">
					Please select the DfX concept
				</div>
				
				<select class="regInput" id="dfxConcepts" name="dfxConcepts" onchange="getGuidelines(this.value)" size="7" style="width:100%; margin-top:10px;">
					<%for(int i=0; i<allDFXInDB.size(); i++){ 
						DesignForX dfx = allDFXInDB.get(i);%>
						<option value="<%=dfx.getId() %>"><%=dfx.getDfxName() %></option>
					<%} %>
				</select>
			</div>
			
			<div class="containerSmall" style="width:49%; height:150px; margin-left:0.5%; float:left">
				<div class="pageTitle" style="width:100%; font-weight:bold">
					Please select the DfX guideline
				</div>
				<div id="guidelinesDiv" >
				
				</div>
			</div>
			<div style="clear:both"></div>
		
			<div class="containerSmall" style="width:auto; margin-top:10px">
				<div class="pageTitle" style="width:100%; font-weight:bold">
					Details about selected DfX Guideline
				</div>
				<div id="guidelinesContent" ></div>
			</div>
		</div>
		
		<button id="addDFX" name="addDFX" onclick="addDFX()" style="width:20%; margin-top:10px; font-size:x-small; font-weight:bold; float:left;">Select Design for X concepts</button>
		<div style="clear:both"></div>
		
		<div id="addDFXConcepts" style="width:100%; margin-top:10px">
			<div class="containerSmall" style="width:48%; height:150px; float:left">
				<div class="pageTitle" style="width:100%; font-weight:bold">
					Please select one or more DfX concepts - <span style="font-size:smaller; font-weight:lighter;">use Ctrl key</span>
				</div>
				
				<select class="regInput" id="selDfxConcepts" name="selDfxConcepts" multiple="multiple" size="5" style="width:100%; margin-top:10px;">
					<%for(int i=0; i<allDFXInDB.size(); i++){ 
						DesignForX dfx = allDFXInDB.get(i);%>
						<option value="<%=dfx.getId() %>"><%=dfx.getDfxName() %></option>
					<%} %>
				</select>
				<button id="addConcepts" name="addConcepts" onclick="addConcepts()" style="width:40%; margin-top:5px; font-size:x-small; font-weight:bold; float:left">Copy selected</button>
				<div style="clear:both"></div>
			</div>
			
			<div class="containerSmall" style="width:49%; height:150px; margin-left:0.5%; float:left">
				<div class="pageTitle" style="width:100%; font-weight:bold">
					Current DfX concepts selected for your product
				</div>
				
				<select class="regInput" id="chosenDfxConcepts" name="chosenDfxConcepts" size="5" style="width:100%; margin-top:10px;">
				</select>
				<div style="width:100%; margin-top:5px">
					<button id="removeConcept" name="removeConcept" onclick="removeConcept()" style="width:40%; font-size:x-small; font-weight:bold; float:left">Remove selected</button>
					<button id="selectGuidelines" name="selectGuidelines" onclick="selectGuidelines()" style="width:40%; font-size:x-small; font-weight:bold; float:right">Select guidelines</button>
					<div style="clear:both"></div>
				</div>
			</div>
		</div>
		<div style="clear:both"></div>
		
		<div id="guidelinesTable">
			
		</div>
		
	</div>
<%}else{%>
	<div style="float:right; margin-top:30px; margin-bottom:-10px; text-align:right; ">
		Search table: <input name="filter" id="dfxFilter-box" value="" maxlength="30" size="30" type="text" style="background-color:#E6EEEE">
		<input id="dfxFilter-clear-button" type="submit" value="Clear" style="background-color:#E6EEEE;"/>
	</div>
	<div style="clear:both;"></div>
	<table id="dfxApproverTable" class="tablesorter" style="width:100%;" rules="rows" frame="hsides" bordercolor="#DBDBDB">
		<thead>
			<tr>
				<th style="width:30%">Design for X concept</th>
				<th style="width:60%">Design for X guideline</th>
				<th style="text-align:center">Action</th>
			</tr>
		</thead>
		<tbody>
			<%for(int i=0; i<dfxRelMatrixByActName.size(); i++){
				DfXRelMatrix dfxRM = dfxRelMatrixByActName.get(i);
				DfXGuidelines dfxG = dfxRM.getDfxGuideline();
				DesignForX dfx = dfxG.getDfx();%>
				<tr id="row_<%=i+1 %>">
					<td><%=dfx.getDfxName() %></td>
					<td>
						<div style="float:left"><%=dfxG.getGuideline() %></div>
						<img class="helpImg" src="/proddev/images/information.png" onclick="$('#dfxGDiv').show(), $('#dfxGDetails').html('<%=dfxG.getInfo()%>')" style="float:right">
					</td>
					<td style="text-align:center">
						<img class="helpImg" src="/proddev/images/delete1.png" onclick="removeDFXG('<%=dfxRM.getId()%>','<%=i+1%>')" align="middle" width="20" height="20"/>
					</td>
				</tr>
			<%} %>
		</tbody>
	</table>
	
	<div id="dfxPager" class="pager" style="float:right; margin-top:-10px">
		<form>
			<img src="/proddev/images/tablePager/first.png" class="first" width="20" height="20" />
			<img src="/proddev/images/tablePager/previous.png" class="prev" width="20" height="20" />
			<input type="text" class="pagedisplay" style="text-align:center; width:40px; height:20px; background-color:#E6EEEE"/>
			<img src="/proddev/images/tablePager/next.png" class="next" width="20" height="20" />
			<img src="/proddev/images/tablePager/last.png" class="last" width="20" height="20" />
			<select class="pagesize" style="height:20px;">
				<option SELECTED value="1">set paging</option>
				<option value="5">5 per page</option>
				<option value="10">10 per page</option>
				<option value="20">20 per page</option>
				<option value="30">30 per page</option>					
			</select>
		</form>
	</div>
	<div style="clear:both"></div>
	
	<%	DfXRelMatrix dRM = dfxRelMatrixByActName.get(0);
		String activityName =  dRM.getActivityName();%>
	<div style="width:100%">
		<button id="rejectActivity" name="rejectActivity" onclick="rejectActivity('<%=activityName%>')" style="width:20%; font-size:x-small; font-weight: bold; float:left">Reject activity</button>
		<button id="approveActivity" name="approveActivity" onclick="approveActivity('<%=activityName%>')" style="width:20%; font-size:x-small; font-weight: bold; float:right">Approve activity</button>
		<div style="clear:both"></div>
	</div>
	
	<div id="rejectDialog" title="Propose changes" style="display:none">
		<jsp:include page="/pages/content/project/devTools/workspace/changes/changeReport.jsp"></jsp:include>
	</div>
	
	<form name="rejectForm" method="post" action="/proddev/controller" style="margin:0px">
		<input type = "hidden" name = "<%=ControllerConstants.MANAGER_KEY%>" value = "<%=ControllerConstants.TOOLS_MANAGER%>"/>
		<input type = "hidden" name = "<%=ControllerConstants.METHOD_KEY%>" value = "<%=ToolsConstants.STAKEHOLDERS_FWD%>"/>
	</form>
		
	<form name="approveForm" method="post" action="/proddev/controller" style="margin:0px">
		<input type = "hidden" name = "<%=ControllerConstants.MANAGER_KEY%>" value = "<%=ControllerConstants.ACTIVITY_MANAGER%>"/>
		<input type = "hidden" name = "<%=ControllerConstants.METHOD_KEY%>" value = "<%=ActivityConstants.UPDATE_ACTIVITY%>"/>
		<input type="hidden" name="activityName" id="activityName">
	</form>
	
	<div class="containerSmall" id="dfxGDiv" style="width:80%; margin-top:20px; margin-left:auto; margin-right:auto">
		<textarea class="regInput" id="dfxGDetails" disabled="disabled" rows="4" style="width:100%; background-color:#ffffff; color:#555555;"></textarea>
	</div>
<%}%>